<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" type="text/css" href="homepage.css">
    <script src="jQuery/jquery-3.6.0.min.js"></script>
</head>

<body>
    <div class="top">
        <div style="width: 980px;">
            <a class="biaoti" href="homepage.php">宇宙音乐</a>
            <a class="suoyin">评论</a>
            <a class="suoyin">合作</a>
            <a class="suoyin">客服</a>
            <a class="suoyin" href="buy.php">我的购买</a>
            <a class="denglu" style="color: rgb(0, 204, 255);" href="user.php">欢迎回来！</a>
        </div>
    </div>
    <div class="middle">
        <p style="height: 50px;"></p>
        <div class="top2">
             <a>我的
                <ul>
                    <li>主页</li>
                    <li>偏好</li>
                    <li>探索</li>
                    <li>新品</li>
                </ul>
            </a>
            <a>歌单
            <ul>
              <li>推荐</li>
              <li>流行</li>
              <li>怀旧</li>
              <li>电台</li>
              <li>更多</li>
            </ul>
            </a> <a>风格
            <ul>
              <li>摇滚</li>
              <li>说唱</li>
              <li>民谣</li>
              <li>电音</li>
              <li>爵士</li>
              <li>更多</li>
            </ul>
            </a> <a>排行榜
            <ul>
              <li>美国公告牌榜</li>
              <li>英国流行榜</li>
              <li>法国流行榜</li>
              <li>俄罗斯流行榜</li>
              <li>全球电子舞曲榜</li>
              <li>更多</li>
            </ul>
            </a>
            <p></p>
<div class="sousuo">
        <input>
                <button>搜索</button>
            </div>
        </div>
        <div style="margin: auto;width: 900px;">
            <div class="middle1">
                <p>精选推荐</p>
                <div class="lunbo" style="display: block;">
                    <img src="img/周杰伦/周杰伦1.jpeg">
                    <div class="xiaotu">
                        <p>周杰伦</p>
                        <img src="img/周杰伦/周杰伦1.jpeg">
                        <img src="img/周杰伦/周杰伦2.jpeg">
                        <img src="img/周杰伦/周杰伦3.jpeg">
                        <img src="img/周杰伦/周杰伦4.jpeg">
                        <div>
                            周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，中国台湾流行乐男歌手、音乐人、演员、导演、编剧。
                        </div>
                        <p>￥50 <button onclick="ying()">立即购买！</button></p>
                    </div>
                </div>
                <div class="lunbo">
                    <img src="img/汪峰/汪峰1.jpeg">
                    <div class="xiaotu">
                        <p>汪峰</p>
                        <img src="img/汪峰/汪峰1.jpeg">
                        <img src="img/汪峰/汪峰2.jpeg">
                        <img src="img/汪峰/汪峰3.jpeg">
                        <img src="img/汪峰/汪峰4.jpeg">
                        <div>
                            汪峰，汉族，1971年6月29日出生于北京市丰台区，中国内地男歌手、音乐人，摇滚乐队“鲍家街43号”的发起人。
                        </div>
                        <p>￥60 <button onclick="zhi()">立即购买！</button> <a href="message.php">查看详情</a></p>
                    </div>
                </div>
                <div class="lunbo">
                    <img src="img/陈奕迅/陈奕迅1.jpeg">
                    <div class="xiaotu">
                        <p>陈奕迅</p>
                        <img src="img/陈奕迅/陈奕迅1.jpeg">
                        <img src="img/陈奕迅/陈奕迅2.jpeg">
                        <img src="img/陈奕迅/陈奕迅3.jpeg">
                        <img src="img/陈奕迅/陈奕迅4.jpeg">
                        <div>
                            陈奕迅（Eason Chan），1974年7月27日出生于中国香港，祖籍广东省东莞市 ，华语流行乐男歌手、演员、作曲人，英国金斯顿大学荣誉博士学位。
                        </div>
                        <p>￥70 <button onclick="Nier()">立即购买！</button></p>
                    </div>
                </div>
                <div class="lunbo">
                    <img src="img/朴树/朴树1.jpeg">
                    <div class="xiaotu">
                        <p>朴树</p>
                        <img src="img/朴树/朴树1.jpeg">
                        <img src="img/朴树/朴树2.jpeg">
                        <img src="img/朴树/朴树3.jpeg">
                        <img src="img/朴树/朴树4.jpeg">
                        <div>
                            朴树，本名濮树，1973年11月8日出生于江苏省南京市，籍贯北京市，中国内地男歌手、音乐制作人、影视演员。
                        </div>
                        <p>￥80<button onclick="huang()">立即购买！</button></p>
                    </div>
                </div>
                <ul class="hengtiao">
                    <li style="background-color: whitesmoke;">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
                <button onclick="bo()" style="float: right;margin: 0 10px;">滚动播放</button>
            </div>
            <div class="middle2">
                <p>特别优惠
                    <a id="showtime"></a>
                </p>
                <div style="height: 400px;">
                    <img src="img/特别优惠/图片1.jpeg">
                    <p>薛之谦&nbsp;</p>
                    <br/>
                    <p>&nbsp;</p>
                </div>
                <div style="height: 400px;">
                    <img src="img/特别优惠/图片2.jpeg">
                    <p>林俊杰&nbsp;</p>
                    <br/>
                    <p>&nbsp;</p>
                </div>
                <div style="height: 180px;">
                    <img src="img/特别优惠/图片3.jpeg">
                    <p></p>
                    <p>&nbsp;</p>
                </div>
                <div style="height: 180px;">
                    <img src="img/特别优惠/图片4.jpeg">
                    <p></p>
                    <p>&nbsp;</p>
                </div>
            </div>
            <div class="middle3">
                <p>音乐风格</p>
                <p>
                    <button onclick="change(0)">轻音乐</button>
                    <button onclick="change(1)">电音</button>
                    <button onclick="change(2)">古典</button>
                    <button onclick="change(3)">爵士</button>
                </p>
                <div class="tab">
                    <img src="img/音乐风格/轻音乐/1.jpeg">
                    <img src="img/音乐风格/轻音乐/2.jpeg">
                    <img src="img/音乐风格/轻音乐/3.jpeg">
                    <img src="img/音乐风格/轻音乐/4.jpeg">
                </div>
                <div class="tab" style="display: none;">
                    <img src="img/音乐风格/电音/1.jpeg">
                    <img src="img/音乐风格/电音/2.jpeg">
                    <img src="img/音乐风格/电音/3.jpeg">
                    <img src="img/音乐风格/电音/4.jpeg">
                </div>
                <div class="tab" style="display: none;">
                    <img src="img/音乐风格/古典/1.jpeg">
                    <img src="img/音乐风格/古典/2.jpeg">
                    <img src="img/音乐风格/古典/3.jpeg">
                    <img src="img/音乐风格/古典/4.jpeg">
                </div>
                <div class="tab" style="display: none;">
                    <img src="img/音乐风格/爵士/1.jpeg">
                    <img src="img/音乐风格/爵士/2.jpeg">
                    <img src="img/音乐风格/爵士/3.jpeg">
                    <img src="img/音乐风格/爵士/4.jpeg">
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <p>
        </p>
        <hr><br>
        <p></p>
    </div>
    <div class="daohang">
        <ul>
            <li>返回顶部</li>
            <li>精选推荐</li>
            <li>特别优惠</li>
            <li>音乐风格</li>
            <li>夜间模式</li>
            <li><a href="buy.php">我的购买</a></li>
        </ul>
    </div>
</body>
<script>
    //下拉菜单
    $(".top2>a").hover(function() {
        $(this).children("ul").slideToggle(200);
    });

    //滑动改变图片
    var tu = document.querySelector(".hengtiao").querySelectorAll("li");
    for (var i = 0; i < tu.length; i++) {
        tu[i].onmouseover = function() {
            gundong = 0;
            clearInterval(time);
            var tu = document.querySelector(".hengtiao").querySelectorAll("li");
            var lun = document.querySelectorAll(".lunbo")
            for (var j = 0; j < tu.length; j++) {
                tu[j].style.backgroundColor = "grey";
                lun[j].style.display = "none";
            }
            this.style.backgroundColor = "whitesmoke";
            lun[this.innerHTML - 1].style.display = "block";
            xian = this.innerHTML - 1;
        }
    }

    //单击小图切换大图
    var xiao = $(".xiaotu").children("img");
    for (var i = 0; i < xiao.length; i++) {
        xiao[i].onclick = function() {
            $(this).parent().prev().attr("src", $(this)[0].src);
        }
    }

    //自动轮播
    var xian = 0;
    var luntu = $(".lunbo");

    function lun() {
        if (xian > luntu.length - 2) {
            xian = 0;
        } else {
            xian++;
        }
        var tu = document.querySelector(".hengtiao").querySelectorAll("li");
        var lun = document.querySelectorAll(".lunbo")
        for (var j = 0; j < tu.length; j++) {
            tu[j].style.backgroundColor = "grey";
            lun[j].style.display = "none";
        }
        tu[xian].style.backgroundColor = "whitesmoke";
        $(lun[tu[xian].innerHTML - 1]).fadeIn();
    }
    var time = setInterval(lun, 2000);
    var gundong = 1; //为0时停止滚动，为1时持续滚动

    //轮播控制
    for (var i = 0; i < luntu.length; i++) {
        luntu[i].onmouseover = function() {
            clearInterval(time);
            gundong = 0;
        }
    }

    function bo() {
        if (gundong == 0) { //判定保证只有一个时钟
            time = setInterval(lun, 2000);
            gundong = 1;
        }
    }

    //tab栏
    function change(a) {
        var tab1 = $(".tab")
        for (var j = 0; j < tab1.length; j++) {
            tab1[j].style.display = "none";
        }
        $(tab1[a]).fadeIn(1000);
    };

    //背景颜色切换
    var dao = $(".daohang>ul>li");
    var flag = 1; //1为夜间模式，0为白天模式
    dao[4].onclick = function() {
        if (flag == 0) {
            flag = 1;
            this.innerHTML = "夜间模式";
            $("body").css("background-color", "black")
            $("body").css("color", "white")
            $(".top").css("background-color", "rgb(68, 68, 68)")
            $(".top2").css("background-color", "rgb(20, 20, 20)")
            $(".middle").css("background-color", "rgb(30, 30, 30)")
            $(".middle1").css("background-color", "black")
            $(".middle3").css("background-color", "rgb(20, 20, 20)")
            $(".bottom").css("background-color", "black")
            $(".daohang>ul>li").css("background-color", "grey")
        } else if (flag == 1) {
            flag = 0;
            this.innerHTML = "白天模式";
            $("body").css("background-color", "white")
            $("body").css("color", "black")
            $(".top").css("background-color", "rgb(200, 200, 200)")
            $(".top2").css("background-color", "rgb(220, 220, 220)")
            $(".middle").css("background-color", "whitesmoke")
            $(".middle1").css("background-color", "white")
            $(".middle3").css("background-color", "rgb(230, 230, 230)")
            $(".bottom").css("background-color", "white")
            $(".daohang>ul>li").css("background-color", "rgb(220, 220, 220)")
        }
    };

    //固定导航
    dao[0].addEventListener("click", function() { //返回顶部
        document.querySelector("body").scrollIntoView()
    }, false);
    dao[1].addEventListener("click", function() { //精选推荐
        document.querySelector(".middle1").scrollIntoView()
    }, false);
    dao[2].addEventListener("click", function() { //特别优惠
        document.querySelector(".middle2").scrollIntoView()
    }, false);
    dao[3].addEventListener("click", function() { //音乐风格
        document.querySelector(".middle3").scrollIntoView()
    }, false);
    //添加成功提示
    function ying() {
        localStorage.setItem("周杰伦", "1");
        alert("添加成功");
    }

    function zhi() {
        localStorage.setItem("汪峰", "1");
        alert("添加成功");
    }

    function Nier() {
        localStorage.setItem("陈奕迅", "1");
        alert("添加成功");
    }

    function huang() {
        localStorage.setItem("朴树", "1");
        alert("添加成功");
    }
    //倒计时
    var showtime = function() {
        var nowtime = new Date(), //获取当前时间
            endtime = new Date("2024/7/1"); //定义结束时间
        var lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数
            leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数
            lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24), //计算小时数
            leftm = Math.floor(lefttime / (1000 * 60) % 60), //计算分钟数
            lefts = Math.floor(lefttime / 1000 % 60); //计算秒数
        return "活动倒计时:" + leftd + "天" + lefth + "小时" + leftm + "分钟" + lefts + "秒"; //返回倒计时的字符串
    }
    var daojishi = document.getElementById("showtime");
    setInterval(function() {
        daojishi.innerHTML = showtime();
    }, 1000); //反复执行函数本身

    //初始化
    window.onload = function() {
        let denglu = localStorage.getItem("登录");
        if (denglu == "0") {
            window.location.href = "login.php";
        }
        let a = localStorage.getItem("用户名");
        document.getElementsByTagName("a")[6].innerText = "欢迎用户:" + a;
    }
</script>

</html>